<template>
  <div :class="$style.treeWap">
    <div style="padding: 10px;">
      <el-input v-if="useSearch" placeholder="输入关键字进行过滤" @input="changeSearch" />
    </div>
    <el-button type="primary" @click="getCheckedKeys">全选中</el-button>
    <el-button type="primary" @click="getHalfCheckedKeys">半选中</el-button>
    <el-tree
      class="filter-tree"
      show-checkbox
      :data="treeData"
      node-key="menuId"
      :props="defaultProps"
      @node-click="changeSelectd"
      :filter-node-method="filterNode"
      ref="tree"
      v-bind="this.$attrs"
    ></el-tree>

    <slot name="getValues" @click="getCheck()" />
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    useSearch: {
      type: Boolean,
      default: false
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: "children",
        label: "name"
      })
    },
    treeData: {
      type: Array,
      default: () => []
    },
    treeCheckChange: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    getCheck(){
      this.$emit('submit', {a:1})
    },
     getCheckedKeys() {
        // console.log('通过key获取',this.$refs.tree.getCheckedKeys());
      },
      getHalfCheckedKeys() {
        // console.log('半选中通过key获取',this.$refs.tree.getHalfCheckedKeys());
      },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id);
      this.changeSelectRow([...this.multipleSelection]);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    changeSearch(val) {
      this.$refs["tree"].filter(val);
    },
    changeSelectd(data, checked, sonChecked) {
      // console.log('点击回调',data, checked, sonChecked)
      this.treeCheckChange(data, checked, sonChecked);
    }
  },
  mounted() {},
  created() {}
};
</script>
<style module lang='scss'>
.treeWap {
  :global {
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: #e5f2ff;
    }
  }
}
</style>

